<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="800px"
    height="480"
    :before-close="handleClose"
  >
    <el-divider />
    <video id="video" controls width="800" height="480" poster="">
      <source src="url" type="video/mp4">
    </video>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'VideoDiolagUtil',
  data () {
    return {
      url: '',
      dialogVisible: false
    }
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
      // 关闭弹出框时 视频关闭播放
      const video = document.getElementById('video')
      video.pause()
    }
  }
}
</script>
